#{extends 'main.html'/}
#{set 'moreCss'}
    <link rel="stylesheet" href="/tts/public/css/detail.css">
#{/set}
#{set 'moreScripts'}
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<script src="https://unpkg.com/mockjs@1.0.1-beta3/dist/mock-min.js"></script>
<script src="https://unpkg.com/lodash@4.17.4/lodash.min.js"></script>
<script src="/tts/public/js/domain/detail.js"></script>
<script>
    $(function(){
        $.getJSON('/tts/tutor/json/${code}',function(data){
            data.contents = _.groupBy(data.contents,function(o){
              return o.theme.code;
            });
            app.teacher = data;
        });
    });
    var app = new Vue({
        el:'#app',
        data:{
            extraContent: '',
            teacher : {
                contents:[],
            }
        },
        computed: {
            imagePath:function(){
                return "https://hr.sufe.edu.cn/hr/upload/photo/"+this.teacher.headShot;
            }
        }
    });
</script>
#{/set}
<div id="app">
    <header class="header">
        <div class="top-bar container-fluid">
            <div class="actions">
                *{<a class="btn" href="#"><i class="fa fa-download" aria-hidden="true"></i> 下载简历</a>}*
            </div><!--//actions-->
        </div><!--//top-bar-->

        <div class="intro">
            <div class="container text-center">
              <div class="row">
                <div class="col-md-2 col-sm-12 col-md-offset-2"  style="height:200px">
                  <img class="profile-image" :src="imagePath" alt="">
                </div>
                <div class="col-md-4">
                  <h1 class="name">{{teacher.name}}<span class="title"> {{teacher.professionalTitle}}</span></h1>
                  <div class="profile">
                    <ul>
                      <li>{{teacher.unit}} {{teacher.tutorType}}
                        <li>学科：{{teacher.direction}}
                          <li v-if="teacher.honorTitle">{{teacher.honorTitle}}
                            </ul>
                  </div><!--//profile-->
                </div>
              </div>
            </div><!--//container-->
        </div><!--//intro-->

        <div class="contact-info">
            <div class="container text-center">
                <ul class="list-inline">
                    <li class="email"><i class="fa fa-envelope"></i><a href="mailto:someone@example.com">{{teacher.email}}</a>
                    </li>
                </ul>
            </div><!--//container-->
        </div><!--//contact-info-->

        <div class="page-nav-space-holder hidden-xs">
            <div id="page-nav-wrapper" class="page-nav-wrapper text-center">
                <div class="container">
                    <ul id="page-nav" class="nav page-nav list-inline">
                        <li><a class="scrollto" href="#education-section">教育经历</a></li>
                        <li><a class="scrollto" href="#experiences-section">工作经历</a></li>
                        <li><a class="scrollto" href="#projects-section">科研项目</a></li>
                        <li><a class="scrollto" href="#works-section">研究成果</a></li>
                        <li v-if="teacher.contents['05']"><a class="scrollto" href="#awards-section">荣誉奖励</a></li>
                        <li><a class="scrollto" href="#course-section">教授课程</a></li>
                        <li v-if="teacher.contents['07']"><a class="scrollto" href="#social-section">社会工作</a></li>
                        <li v-if="teacher.contents['08']"><a class="scrollto" href="#edu-section">学生培养</a></li>
                    </ul><!--//page-nav-->
                </div>
            </div><!--//page-nav-wrapper-->
        </div>
*{        -- 01 教育经历； 02 工作经历； 03 科研项目；
        -- 04-01 研究成果(论文) 04-02 研究成果(著作) 04-03 研究成果(内参)
        -- 05 荣誉奖励 06教授课程 07社会团体兼职信息 08学生培养}*
    </header>
    <!-- Page Content -->
    <div class="wrapper container">
        <section id="education-section" class="education-section section">
            <h2 class="section-title">教育经历</h2>
            <div class="row">
                <div class="item col-xs-12 col-sm-4" v-for="item in teacher.contents['01']" v-if="item.isOpen==1">
                    <div class="item-inner">
                        <h4 class="degree">{{item.title}}</h4>
                        <div class="education-body">
                        </div><!--//education-body-->
                        <div class="time"></div>
                        <div class="desc">
                            <p>
                                {{item.content}}
                            </p>
                        </div>
                    </div><!--//item-inner-->
                </div><!--//item-->
                <div class="pannel pannel-default">
                  <div class="pannel-body">
                    {{extraContent}}
                  </div>
                </div>
            </div><!--//row-->
        </section><!--//section-->

        <section id="experiences-section" class="experiences-section section">
            <h2 class="section-title">工作经历</h2>
            <div class="timeline">
                <div class="item" v-for="item in _.reverse(teacher.contents['02'])" v-if="item.isOpen==1">
                    <div class="work-place">
                        <h4 class="place">{{item.title}}</h4>
                    </div>
                    <div class="job-meta">
                        <div class="title"></div>
                        <div class="time"></div>
                    </div><!--//job-meta-->
                    <div class="job-desc">
                        <p>{{item.content}}</p>
                    </div><!--//job-desc-->
                </div><!--//item-->

            </div><!--//timeline-->
            <div class="pannel pannel-default" style="margin-top:20px">
              <div class="pannel-body">
                {{extraContent}}
              </div>
            </div>
        </section><!--//section-->

        <section id="projects-section" class="portfolio-section section">
          <h2 class="section-title">科研项目</h2>
          <div class="items-wrapper row" style="position:relative;">
              <div class="item col-md-3 col-xs-12" v-for="item in teacher.contents['03']" v-if="item.isOpen==1">
                  <div class="content text-left">
                      <h4 class="sub-title">{{item.title}}</h4>
                      <div class="content">
                      {{item.content}}
                      </div>
                  </div><!--//content-->
                  <a class="link-mask" href="#"></a>
              </div>
          </div>
          <div class="pannel pannel-default" style="margin-top:20px">
            <div class="pannel-body">
              {{extraContent}}
            </div>
          </div>
        </section>

        <section id="works-section" class="works-section section">
          <h2 class="section-title">研究成果(论文)</h2>
          <div class="list-group">
            <a href="javascript:void(0)" class="list-group-item" v-for="item in teacher.contents['04-01']" v-if="item.isOpen==1">
              <h4 class="list-group-item-heading sub-title">{{item.title}}</h4>
              <p class="list-group-item-text">{{item.content}}</p>
            </a>
          </div>
          <div class="pannel pannel-default" style="margin-top:20px">
            <div class="pannel-body">
              {{extraContent}}
            </div>
          </div>
        </section>

        <section id="writings-section" class="works-section section" v-if="teacher.contents['04-02']">
          <h2 class="section-title">研究成果(著作)</h2>
          <div class="list-group">
            <a href="javascript:void(0)" class="list-group-item" v-for="item in teacher.contents['04-02']" v-if="item.isOpen==1">
              <h4 class="list-group-item-heading sub-title">{{item.title}}</h4>
              <p class="list-group-item-text">{{item.content}}</p>
            </a>
          </div>
          <div class="pannel pannel-default" style="margin-top:20px">
            <div class="pannel-body">
              {{extraContent}}
            </div>
          </div>
        </section>

        <section id="references-section" class="works-section section" v-if="teacher.contents['04-03']">
          <h2 class="section-title">研究成果(内参)</h2>
          <div class="list-group">
            <a href="javascript:void(0)" class="list-group-item" v-for="item in teacher.contents['04-03']" v-if="item.isOpen==1">
              <h4 class="list-group-item-heading sub-title">{{item.title}}</h4>
              <p class="list-group-item-text">{{item.content}}</p>
            </a>
          </div>
          <div class="pannel pannel-default" style="margin-top:20px">
            <div class="pannel-body">
              {{extraContent}}
            </div>
          </div>
        </section>

        <section id="awards-section" class="awards-section section" v-if="teacher.contents['05']">
          <h2 class="section-title">荣誉奖励</h2>
          <div class="list-group">
            <a href="javascript:void(0)" class="list-group-item" v-for="item in teacher.contents['05']" v-if="item.isOpen==1">
              <h4 class="list-group-item-heading sub-title">{{item.title}}</h4>
              <p class="list-group-item-text">{{item.content}}</p>
            </a>
          </div>
          <div class="pannel pannel-default" style="margin-top:20px">
            <div class="pannel-body">
              {{extraContent}}
            </div>
          </div>
        </section>

        <section id="course-section" class="course-section section">
            <h2 class="section-title">教授课程</h2>
            <div class="list-group">
                <a href="javascript:void(0)" class="list-group-item" v-for="item in teacher.contents['06']" v-if="item.isOpen==1">
                    <h4 class="list-group-item-heading sub-title">{{item.title}}</h4>
                    <p class="list-group-item-text">{{item.content}}</p>
                </a>
            </div>
            <div class="pannel pannel-default" style="margin-top:20px">
                <div class="pannel-body">
                    {{extraContent}}
                </div>
            </div>
        </section>

        <section id="social-section" class="social-section section" v-if="teacher.contents['07']">
          <h2 class="section-title">社会工作</h2>
          <div class="list-group">
            <a href="javascript:void(0)" class="list-group-item" v-for="item in teacher.contents['07']" v-if="item.isOpen==1">
              <h4 class="list-group-item-heading sub-title">{{item.title}}</h4>
              <p class="list-group-item-text">{{item.content}}</p>
            </a>
          </div>
          <div class="pannel pannel-default" style="margin-top:20px">
            <div class="pannel-body">
              {{extraContent}}
            </div>
          </div>
        </section>

        <section id="edu-section" class="edu-section section" v-if="teacher.contents['08']">
          <h2 class="section-title">学生培养</h2>
          <div class="list-group">
            <a href="javascript:void(0)" class="list-group-item" v-for="item in teacher.contents['08']" v-if="item.isOpen==1">
              <h4 class="list-group-item-heading sub-title">{{item.title}}</h4>
              <p class="list-group-item-text">{{item.content}}</p>
            </a>
          </div>
          <div class="pannel pannel-default" style="margin-top:20px">
            <div class="pannel-body">
              {{extraContent}}
            </div>
          </div>
        </section>
    </div>
</div>
